import React from 'react'
import {NavLink,Routes,Route,Navigate} from "react-router-dom"
import Home from './pages/Home'
import NewsList from './pages/NewsList'
import GoodsList from './pages/GoodsList'
import My from './pages/My'
import Cart from './pages/Cart'
import Collect from './pages/Collect'
import "./App.css";

export default function App(props) {
  return (
      <div className={"container"}>
          <nav>
              <NavLink to={"/"}>首页</NavLink>
              <NavLink to={"/goodsList"}>商品列表</NavLink>
              <NavLink to={"/newsList"}>新闻列表</NavLink>
              <NavLink to={"/my"}>个人中心</NavLink>
          </nav>
          <Routes>
              <Route path={'/'} element={<Home></Home>}></Route>
              <Route path={'/newsList'} element={<NewsList></NewsList>}></Route>
              <Route path={'/goodsList'} element={<GoodsList></GoodsList>}></Route>
              <Route path={'/my'} element={<My></My>}>
                    {/*二级路由完整写法*/}
                  {/* <Route path={'/my/cart'} element={<Cart/>}></Route>
                  <Route path={'/my/collect'} element={<Collect />}></Route> */}
                    {/*如果省略前缀，默认是相对的是父级/my*/}
                  {/* <Route path={'/my'} element={<Navigate to={'cart'}></Navigate>}></Route> */}
                    {/*index属性代表默认使用哪一个子路由*/}
                  <Route index element={<Navigate to={'cart'} />}></Route>
                    <Route path={'cart'} element={<Cart/>}></Route>
                    <Route path={'collect'} element={<Collect/>}></Route>
              </Route>

          </Routes>
    </div>
  )
}
